<!--
 * @Author: 王坤
 * @LastEditors: 王坤
 * @Description: 
-->
<template>
  <fieldset class="lc-divider" :style="customStyles">
    <legend class="lc-divider__legend">
      {{ label }}
    </legend>
  </fieldset>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
  //分割线文案
  label: {
    type: String,
    default: ''
  },
  //文案位置
  textAlign: {
    type: String,
    default: 'left'
  },
  //偏移量
  offset: {
    type: String,
    default: ''
  },
  //空白间隔
  paddingInline: {
    type: String,
    default: ''
  }
});

const customStyles = computed(() => {
  const styleObj = {
    '--text-align': props.textAlign,
    '--padding-inline': props.paddingInline
  };
  if (props.textAlign == 'left') {
    styleObj['--margin-right'] = 0;
    styleObj['--margin-left'] = props.offset;
  }
  if (props.textAlign == 'right' || props.textAlign == 'center') {
    styleObj['--margin-left'] = 0;
    styleObj['--margin-right'] = props.offset;
  }
  return styleObj;
});
</script>
